<template>
  <!--CA绑定弹框-->
  <Modal v-model="modalShow" :loading="modalLoading" :title="admin.nickName + 'CA账号'" ok-text="绑定" @on-ok="okModal"
    @on-cancel="cancelModal">
    <Form :label-width="100">
      <FormItem label="选择用户证书">
        <Select :value="currentUserCertId" @on-change="onChooseUserCert" placeholder="选择用户证书">
          <Option v-for="item in userCertList" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="用户证书标识">
        <Input :value="userCertUid" readonly placeholder="用户证书标识"></Input>
      </FormItem>
      <FormItem label="电子签章">
        <img v-if="currentUserPicture" :src="'data:image/png;base64,' + currentUserPicture" />
        <template v-else>-</template>
      </FormItem>
    </Form>

    <Spin v-if="loading" size="small" fix></Spin>
  </Modal>
</template>

<script>
import api from "@/api/commonApi";
import CA from "@/utils/ca.js";

export default {
  name: 'BindCaModalCom',
  emits: ['success'],

  data() {
    return {
      loading: false,
      modalLoading: true,
      modalShow: false,
      ca: null,
      admin: {},
      userCertList: [],

      userCertUid: '',
      currentUserPicture: '',
      currentUserCertId: '',
      currentUserCertBase64: '',
    }
  },
  methods: {
    init() {
      this.ca = null
      this.admin = {}
      this.userCertList = []

      this.userCertUid = ''
      this.currentUserPicture = ''
      this.currentUserCertId = ''
      this.currentUserCertBase64 = ''
    },
    show(payload) {
      this.loading = true
      this.init()

      this.admin = JSON.parse(JSON.stringify(payload))

      this.ca = new CA()

      this.ca.getUserCertList().then((res) => {
        this.modalShow = true
        this.userCertList = res;
        this.loading = false
      })
    },
    async onChooseUserCert(e) {
      this.loading = true


      //选择用户证书
      try {
        await this.ca.chooseCert(e)
        this.currentUserCertBase64 = this.ca.userCertBase64
      } catch (error) {

      }

      //获取电子签章base64图片
      try {
        let res = await this.ca.getPicture()
        this.currentUserPicture = res.retVal
      } catch (error) {

      }

      //获取用户唯一id
      try {
        let res = await this.ca.getUserCertInfo()
        this.userCertUid = res.retVal
      } catch (error) {

      }

      this.currentUserCertId = e;
      this.loading = false
    },
    okModal() {

      if (!this.currentUserCertId) {
        this.$Message.warning('请选择用户证书')
        this.modalLoading = false
        setTimeout(() => {
          this.modalLoading = true
        }, 500)
        return
      }

      this.$axios
        .post(api.caManageBind, {
          id: this.admin.id,
          caOid: this.userCertUid,
          signatureBase64: this.currentUserPicture,
        }).then(res => {
          
          if (res.data.code == 1) {
            this.$emit('success')
            this.modalShow = false
          } else {
            this.$Message.error(res.data.message)
            this.modalLoading = false
            setTimeout(() => {
              this.modalLoading = true
            }, 500)
          }

        })
    },
    cancelModal() {
      this.modalShow = false
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-modal-wrap {
  .ivu-modal{
    float: none !important;
    top: 100px !important;
    height: auto !important;
  }
}
</style>